<template>
  <div class="container">
    <div class="container_top">
      <div>
        <a-image
            width="200"
            :src="Information?.blurPicUrl"
            style="border-radius: 20px;height:220px"
        />
      </div>
      <div class="container_center">
        <div>
          <div class="container_center_top">
            <a-tag color="red">歌单</a-tag>
            <p style="margin:  10px">{{ Information?.name }}</p>
          </div>
          <div class="container_center_two">
            <a-avatar>
              <img
                  alt="avatar"
                  :src="Information?.artist?.img1v1Url"
              />
            </a-avatar>
            <a style="margin:10px;color: dodgerblue">{{ Information.creator?.nickname }}</a>
            <p>2020-8-17创建</p>
          </div>
        </div>
        <div class="container_center_stree">
          <a-button type="primary" shape="round" status="danger">
            <template #icon>
              <icon-caret-right/>
            </template>
            播放全部
          </a-button>
          <a-button type="outline" shape="round" style="color: black;border: 1px solid #ddd"
                    class="container_center_stree_button_two">
            <template #icon>
              <icon-heart/>
            </template>
            收藏
          </a-button>
          <a-button type="outline" shape="round" style="color: black;border: 1px solid #ddd">
            <template #icon>
              <icon-launch/>
            </template>
            分享
          </a-button>
        </div>
        <div>
          <div>
            <span>标签：</span>
            <span v-for="item in Information?.tags" :key="item" style="color: dodgerblue">{{ item }},</span>
          </div>
          <div style="display: flex;margin:  10px 0">
            <div>
              <span>歌曲：</span>
              <span>{{ dataList.length }}</span>
            </div>
            <div style="margin: 0 10px">
              <span>播放量：</span>
              <span>{{ Information?.shareCount }}万</span>
            </div>
          </div>
          <div style="overflow:hidden;white-space:nowrap;text-overflow:ellipsis;width:60rem">
            <span>简介：</span>
            <span>{{ Information?.description }}</span>
          </div>

        </div>
      </div>
    </div>
    <atable :dataList="dataList"></atable>
  </div>
</template>

<script setup>
import {ref} from "vue"
import {useRoute} from "vue-router";
import {GetalbumListApi} from "~/commonApi/api"
import atable from "~/pages/detail/conponents/table.vue"

const route = useRoute()
const dataList = ref([])
//获取歌单歌曲
const id = ref('')
id.value = route.query.id
const Information = ref({})
const getdataList = async () => {
  const res = await GetalbumListApi(id.value)
  dataList.value = res.songs
  Information.value = res.album
}
//获取歌单信息

const getInformation = async () => {
  const res = await GetplaylistInformationApi(id.value)
  Information.value = res.playlist
}
getInformation()
getdataList()


</script>

<style scoped lang="scss">
.container {
  overflow-y: scroll;
  height: 100vh;
}

.container_top {
  display: flex;
  margin: 1rem;

  .container_center {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin: 0 2rem;

    .container_center_top {
      display: flex;
      align-items: center;
    }

    .container_center_two {
      display: flex;
      align-items: center;
    }

    .container_center_stree_button_two {
      margin: 0 10px;
    }
  }

}

</style>